<template>
	<view class="context">
		<view class="title-box"><text class="s-tit">{{ title }}</text><text class="quick-btn" @click="onQuickFill()"
				v-show="(specList && specList.length > 1) || (unitList && unitList.length > 1)">{{ titleTxt }}</text></view>
		<view>{{ titleDesc }}</view>
		<view v-if="specList && specList.length > 0">
			<view class="spec-box" v-for="item in specList" :key="item.ids">
				<text>{{ item.titles ? "规格:" + item.titles : '' }}</text>
				<view class="p-box" v-for="item1 in unitList" :key="item.ids+'_'+ item1.id">
					<view class="item2-list" v-for="item2 in priceList" :key="item.ids+'_'+ item1.id + '_' + item2.psort">
						<view class="u-box">
							<comConvert :ref="item.ids + '_' + item1.id + '_' + item2.psort" :title="item2.title"
								:id="item.ids + '_' + item1.id + '_' + item2.psort"
								:covernum="mapPrice[item.ids+'_'+ item1.id + '_' + item2.psort] ? mapPrice[item.ids+'_'+ item1.id + '_' + item2.psort].price:0" 
								:coupons="mapPrice[item.ids+'_'+ item1.id + '_' + item2.psort] ? mapPrice[item.ids+'_'+ item1.id + '_' + item2.psort].money_q:0" 
								:showQ="showQ"
								:minUnil="item1.title"
								@onFouces="onFouces"
								@changInputTxt="changInputTxt">
							</comConvert>
						</view>
					</view>
					<view class="item2-list" v-if="hasPricec">
						<view class="u-box">
							<comConvert
								:ref="item.ids+'_'+ item1.id + '_pricec'"
								:title="'划线价'" 
								:id="item.ids+'_'+ item1.id + '_pricec'" 
								:covernum="mapPrice[item.ids+'_'+ item1.id + '_pricec'] ? mapPrice[item.ids+'_'+ item1.id + '_pricec'].price : 0" 
								:showQ="false"
								:minUnil="item1.title"
								@onFouces="onFouces"
								@changInputTxt="changInputTxt">
							</comConvert>
						</view>
					</view>
				</view>
			</view>
		</view>		

		<view class="spec-box" v-if="specList && specList.length == 0">
			<!-- <text>{{item.titles ? "规格:" + item.titles  : ''}}</text> -->
			<view class="p-box" v-for="(item1, index1) in unitList" :key="index1">
				<view class="item2-list" v-for="(item2, index2) in priceList" :key="index2">
					<view class="u-box">
						<comConvert :ref="'0_' + item1.id + '_' + item2.psort" :title="item2.title"
							:id="'0_' + item1.id + '_' + item2.psort"
							:covernum="mapPrice['0_'+ item1.id + '_' + item2.psort] ? mapPrice['0_'+ item1.id + '_' + item2.psort].price : 0"
							:coupons="mapPrice['0_'+ item1.id + '_' + item2.psort] ? mapPrice['0_'+ item1.id + '_' + item2.psort].money_q : 0"
							:minUnil="item1.title"
					        :showQ="showQ"
							@onFouces="onFouces"
							@changInputTxt="changInputTxt">
						</comConvert>
					</view>
				</view>
				<view class="item2-list" v-if="hasPricec">
					<view class="u-box">
						<comConvert
							:ref="'0_'+ item1.id + '_pricec'" 
							:title="'划线价'" 
							:id="'0_'+ item1.id + '_pricec'" 
							:covernum="mapPrice && mapPrice['0_'+ item1.id + '_pricec'] ? mapPrice['0_'+ item1.id + '_pricec'].price : 0"
							:minUnil="item1.title"
						    :showQ="showQ"
							@onFouces="onFouces"
							@changInputTxt="changInputTxt">
						</comConvert>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import comConvert from "../comm/ComConvert.vue";
import goodsCtrl from "../../js/gd/GoodsCtrl.js";
import goodsTlpCtrl from "../../js/gd/GoodsTlpCtrl.js";
import eventCtrl from "../../js/event/EventCtrl.js";
export default
	{
		components: { comConvert },
		props: ["type", "title", "titleTxt", "titleDesc","is_price_quote_type"],
		data() {
			return {
				specList: [],
				priceList: [],
				unitList: [],
				priceQuoteType: 0,
				mapPrice: {},
				showQ: false,
				hasPricec: false,
			}
		},
		methods:
		{
			initData() {
				this.specList = [];
				this.unitList = [];
				this.priceList = [];
				this.mapPrice = {};
				this.specList = goodsCtrl.getPriSpec();
				this.unitList = goodsCtrl.getPriceUnit();
				this.mapPrice = goodsCtrl.setSpecUnitPrice();
				this.priceList = goodsCtrl.getPriceList();
				this.showQ = goodsTlpCtrl.hasCoupons();
				this.priceQuoteType = goodsTlpCtrl.getPriceQuoteType();
				this.hasPricec = goodsTlpCtrl.hasPricec();
			},

			onQuickFill() {
				goodsCtrl.qucklyFillPrice(this.changePriceEvent);
			},

			changInputTxt(data) {
				let value = "";
				if (this.is_price_quote_type == 2) {
					value = goodsCtrl.checkPriceInputSpec();
				}
				if (!value && this.is_price_quote_type == 2 ) {
					if (this.$refs[data.id] && this.$refs[data.id][0] && this.$refs[data.id][0].updateInputTxt) {
						this.$refs[data.id][0].setSpaceStr();
					}
					return;
				}
				goodsCtrl.changePriceCover(data);
			},

			onFouces(data) {
				// let value = goodsCtrl.checkPriceInputSpec();
				// if (!value) {
				// 	if (this.$refs[data.id] && this.$refs[data.id][0] && this.$refs[data.id][0].updateInputTxt) {
				// 		this.$refs[data.id][0].setSpaceStr();
				// 	}
				// }
			},

			changePriceEvent(data) {
				if (this.$refs[data.id] && this.$refs[data.id][0] && this.$refs[data.id][0].updateInputTxt) {
					this.$refs[data.id][0].updateInputTxt(data);
				}
			},
		},

		mounted() {
		},
	}
</script>

<style lang="scss">
.context {
	padding-top: 20px;
	padding-bottom: 20px;
	font-size: 13px;

	.title-box {
		margin-bottom: 10px;

		.s-tit {
			font-weight: bold;
			padding-right: 10px;
		}

		.quick-btn {
			color: #fff;
			background-color: #3388ff;
			padding: 5px;
			cursor: pointer;
			border-radius: 4px;
		}
	}

	.p-box {
		display: flex;
		flex-wrap: wrap;
		width: 100%;

		.item2-list {
			display: flex;
			flex-wrap: wrap;
			.u-box {
				padding-right: 10px;
				padding-top: 4px;
				padding-bottom: 4px;
				display: flex;
				flex-wrap: wrap;
			}
		}
	}
}
</style>
